<!--
  补助发放情况统计页面
-->
<template>
  <div>
    <div class="header">
      <el-page-header @back="goBack" content="补助发放情况统计"></el-page-header>
    </div>

    <!--对不同年份不同致贫原因困难职工发放补助统计信息表 -->
    <div>
      <el-table :data="staReliefData" v-loading="loading" stripe border style="width: 100%;margin-top: 30px;" height="560">
        <el-table-column prop="year" label="年份" width="100"></el-table-column>
        <el-table-column prop="brzb" label="本人重病类补助总金额（元）"  ></el-table-column>
        <el-table-column prop="brxg" label="本人下岗类补助总金额（元）"  ></el-table-column>
        <el-table-column prop="jszb" label="家属重病类补助总金额（元）"  ></el-table-column>
        <el-table-column prop="zrzh" label="自然灾害类补助总金额（元）"  ></el-table-column>
        <el-table-column prop="znsx" label="子女上学类补助总金额（元）"  ></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
          <el-button type="primary" size="small" @click="graph(scope.$index)">统计图</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 补助发放情况数据可视化弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="90%">
      <div class="dialog-style">
        <div class="schart" v-if="dialogVisible">
          <schart class="wrapper" canvasId="canvas" :options="options" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" >关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import instance from "../../../utils/request";
import Schart from 'vue-schart';

export default {
  name: "StaRelief",

  data() {
    return {
      // 弹窗是否显示
      dialogVisible: false,
      //数据加载动画是否显示
      loading:false,
      //对困难职工补助发放数据数组
      allTableData:[
      ],
      //统计数据存储数组
      staReliefData: [
      ],
      //统计数据可视化统计图数据加载对象
      options: {
        type: "bar",
        title: {
          text: "补助发放情况统计图"
        },
        bgColor: "#fbffff",
        labels: ["本人重病","本人下岗", "家属重病", "自然灾害", "子女上学"],
        datasets: [
          {
            label: "补助发放总金额（元）",
            fillColor: "rgba(400, 100, 120, 0.5)",
            //初始化
            data: [0,0,0,0,0]
          },
        ]
      }

    }
  },

  components: {
    //可视化统计图组件
    Schart
  },
  //获取补助发放数据方法（生命周期方法）
  created() {
    let _this = this;
    instance.get('/api/analyze/getYearAndMoney').then(function (res) {
      if(res.data.code === 200){
        //数据处理逻辑
        _this.allTableData=res.data.data;
        _this.loading = false;
        //alert('数据获取成功！');
        console.log(_this.allTableData);
        _this.statData();
      }
      else if(res.data.code === 208){
        alert('查询信息不存在');
        //清空状态
      }
      else {
        alert('失败');
      }
    }).catch(function (err) {
      console.log(err);
    });
  },

  methods: {
    //关闭弹窗方法
    closeDialog(){
      this.dialogVisible = false;
    },
    //向统计图中加载数据方法
    graph(rowId) {
      let n=rowId;
      this.options.datasets[0].data[0]=this.staReliefData[n].brzb;
      this.options.datasets[0].data[1]=this.staReliefData[n].brxg;
      this.options.datasets[0].data[2]=this.staReliefData[n].jszb;
      this.options.datasets[0].data[3]=this.staReliefData[n].zrzh;
      this.options.datasets[0].data[4]=this.staReliefData[n].znsx;
      console.log(this.options.datasets[0].data);
      this.dialogVisible = true;
    },
    //补助信息统计方法（计算函数）
    statData() {
      var n=0;
      var temp={};
      for(var i = 2000;i<2099;i++)
      {
        temp={year:i, brzb: 0,brxg: 0, jszb:0, zrzh: 0, znsx: 0};

        for (var j = 0; j < this.allTableData.length; j++) {
          if (this.allTableData[j].year === i){
            if(this.allTableData[j].srId===1) {
              temp.brzb=temp.brzb+parseInt(this.allTableData[j].money);
            }
            if(this.allTableData[j].srId===2){
              temp.brxg=temp.brxg+parseInt(this.allTableData[j].money)
            }
            if(this.allTableData[j].srId===3){
              temp.jszb=temp.jszb+parseInt(this.allTableData[j].money)
            }
            if(this.allTableData[j].srId===4){
             temp.zrzh=temp.zrzh+parseInt(this.allTableData[j].money)
            }
            if(this.allTableData[j].srId===5){
              temp.znsx=temp.znsx+parseInt(this.allTableData[j].money)
            }
          }
        }
        if(temp.brxg+temp.brzb+temp.zrzh+temp.znsx+temp.jszb!==0)
        {
          this.staReliefData.push(temp);
          n++;
        }
      }
    },
    //返回方法上次浏览页面
    goBack() {
      this.$router.go(-1);
    },
  }
}
</script>
<style scoped>
.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header>span {
  color: #03a9f4;
}
.schart{
  width: 600px;
  display: inline-block;
}
.wrapper{
  width:600px;
  height: 500px;
}
</style>
